<template>
    <div id="recored" class="recored">
        <div class="recoredtitlename">
            
            <span>Articles - 16</span>
        </div>
        <!-- content -->
        <div class="recoredcontentlist">
            <div class="recoredcontent recoredyear">
                
                <span>2022</span></div>

            <div class="recoredcontent"  >
                
                <a class="recoredcontentaimg" href="#"><img src="	https://gitee.com/Cezzz/image2_repo/raw/master/img/20220114172154.jpg" alt=""></a>
                <div class="recoredcontenttext">
                    <div class="recoredcontenttexttime">
                        
                        <time class="el-icon-date recoredcontenttexttimetime"> 2022-1-31</time>
                    </div>
                    <a class="recoredcontenttexta" href="#">{{bokecomtent}}</a>
                </div>
            </div>
            
        </div>
        
        
    </div>
</template>

<script>
export default {
    name:'record',
    data () {
        return {
            // 这是记录博客板块
            bokecomtent:null,
        }
    },
    created () {
        
        this.bokecomtent='title'
        
        
    },
    

}
</script>

<style>
    :root{
        --record-ico-color:rgb(255, 153, 0);
        --record-ico-transition:all .8s ease-in-out;
        --record-hover-a:#002d40;
    }
    .recoredcontenttexta:hover{
        color: var(--record-hover-a);
        transform: translateX(10px);
        -webkit-transform: translateX(10px);
        -moz-transform: translateX(10px);
        -o-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition:all 0.3s ease-in-out;
    }
    .recoredcontenttext{
        padding: 0 16px;
        flex: 1;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -o-box-flex:1;
        -ms-flex: 1;
        -webkit-flex:1;
        
    }
    .recoredcontenttexta{
        
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: #4c4948;
        transition: all 1s;
        font-size: 1.1em;
    }
    .recoredcontentaimg:hover img{
        transform:scale(1.2);
        transition: all 1s;
    }
    .recoredcontentaimg{
        overflow: hidden;
        width: 60px;
        height: 60px;
        display: inline-block;
        border-radius: 5px 0 0 5px;
    }
    .recoredcontentaimg img{
        width: 100%;
        height: 100%;
        
        object-fit: cover;
        transition: all 3s ease-in-out;
    }
    
    .recoredcontent i:hover,.recoredtitlenamei:hover{
        color: var(--record-ico-color);
    }
    .recoredcontent i{
        font-size: 1.23em;
        position: absolute;
        top: 12px;
        bottom: 0;
        left: calc(1% - 47px);
    }
    
    
    .recoredcontent{
        position: relative;
        display: flex;
        display: -webkit-box;
        -webkit-box-align: center;
        -webkit-align-items:center;
        align-items: center;
        margin: 0 0 20px 10px;
        transition: all .3s ease-in-out;
    } 
    
    .recoredyear span{
        font-size:1.43em;
        
    }
    .recoredcontentlist{
        
        margin-left:10px;
        padding-left:20px;
        border-left: 2px solid #aadafa;
    }
    
    .recoredtitlename{
        position: relative;
        margin-left: 10px;
        padding: 0 0 20px 20px;
        font-size: 1.62em;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        
    }
    
    .recoredtitlename i{
        font-size: 1.23em;
        position: absolute;
        top: 10px;
        bottom: 0;
        left: calc(1% - 2.7%);
    }
    
    .recored{
        padding: 50px 40px;
        align-self: flex-start;
        -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 3px 8px 6px rgba(7,17,27,0.05);;
        -webkit-box-shadow:0 3px 8px 6px rgba(7,17,27,0.05);
        transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        width: 74%;
    }
</style>